/*
 *@description: 栏目管理
 *@Author:@reynold
 *@Date:2025-03-22 11:01:32
 *@Update:2025-03-22 11:01:32
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div class="box">
      <div class="box_top">
        <el-button size="mini" @click="addCate">添加</el-button>
      </div>
      <div class="box_bottom">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="cateName"
            label="栏目编号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            label="图标">
            <template slot-scope="scope">
              <img :src="scope.row.icon" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="sortId"
            label="排序号">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button class="columnBtn1" type="text" size="small" @click="showCate(scope.row)">查看</el-button>
              <el-button class="columnBtn2" type="text" size="small" @click="showPop(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 抽屉 -->
        <el-drawer
          title="添加栏目"
          :visible.sync="drawer">
          <div class="demo-drawer__content">
            <el-form :model="drawerForm" :rules="rules">
              <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
                <el-input v-model="drawerForm.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="handlesubmit" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            </div>
          </div>
        </el-drawer>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

        <!-- 详细信息dialog -->
        <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <el-table-column property="id" label="栏目id" width="150"></el-table-column>
            <el-table-column property="cateName" label="栏目编号"></el-table-column>
            <el-table-column property="name" label="名称"></el-table-column>
            <el-table-column label="图标">
              <template slot-scope="scope">
                <img :src="scope.row.icon" alt="">
              </template>
            </el-table-column>
            <el-table-column property="sortId" label="排序号"></el-table-column>
            <el-table-column property="date" label="时间" width="200"></el-table-column>
          </el-table>
        </el-dialog>
        <!-- 提示删除栏目的dialog -->
        <el-dialog
          title="删除栏目"
          :visible.sync="dialogVisible"
          width="30%">
          <span>确认要删除此栏目吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="delCate">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return {
      tableData: [],
      pageQuery:{
        pageSize:10,
        pageNum:1
      },
      total:100,
      drawer: false,
      drawerForm:{
        name:''
      },
      formLabelWidth: '80px',
      loading: false,
      drawerTitle:'添加栏目',
      dialogTableVisible:false,
      // 提示删除的变量
      dialogVisible:false,
      cateId:0,
      gridData:[
      ],
      //添加栏目规则
      rules:{
         name: [
            { required: true, message: '请输入栏目名称', trigger: 'blur' },
            { min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  methods:{
    // 初始序号
    initIndex(){
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },
    // 分页的方法
    handleSizeChange(val){
      this.pageQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val){
      this.pageQuery.pageNum = val
      this.getList()
    },
    // 打开抽屉
    addCate(){
      this.drawer = true
    },
    // 取消抽屉
    cancelForm(){
      this.drawer = false
    },
    // 添加栏目
    handlesubmit(){
      // 提交表单的时候应该把drawerForm的数据发送给后台
      this.$confirm('确定要栏目吗')
        .then(_ => {
          this.loading = true;
          // 提交数据
          instance.post('/category/add',this.drawerForm).then(res=>{
            if(res.data.status == 2001){
              utils.showWarning(res.data.message)
            }
            else{
              utils.showSuccess(res.data.message)
              this.getList()
            }
          })
          // 提交完数据之后关闭抽屉
          this.loading = false
          this.drawer = false
          this.drawerForm.name = ''
        })
        .catch(_ => {});
    },
    // 展示确认删除框
    showPop(scope){
      this.dialogVisible = true
      this.cateId = scope.id
    },
    // 确认删除栏目的方法
    delCate(){
      console.log(this.cateId);
      instance.post('/category/del',this.cateId).then(res=>{
        utils.showSuccess(res.data.message)
        this.getList()
      })
      this.dialogVisible = false
    },
    // 分页获取table数据
    getList(){
      instance.post('/category/list',this.pageQuery).then(res=>{
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    },
    // 查看数据详情
    showCate(scope){
      console.log(scope);
      this.gridData = []
      this.gridData.push(scope)
      this.dialogTableVisible = true
    }
  },
  created(){
    this.getList()
  },
  components:{
    Card
  }
}
</script>

<style lang="less" scoped>
.box{
  .box_top{
    .el-button--mini{
      color: #fff;
      background-color: #188b8f;
      border: none;
    }
  }
  .box_bottom{
    .tiltle{
      margin: 10px;
      font-size: 16px;
      font-weight: 600;
    }
    .demo-drawer__content{
      form{
        height: 80vh;
      }
      .demo-drawer__footer{
        float: right;
        margin-right: 15px;
      }
    }
    .columnBtn1{
      color: #188b8f;
    }
    .columnBtn2{
      color: rgb(236, 65, 65);
    }
    // 分页样式
    .el-pagination{
      float: right;
    }
  }
}
.el-color-picker__icon, .el-input, .el-textarea{
  width: 300px;
}
</style>